<template>
  <div>

    <a-row :gutter="20">
      <a-col :span="12">
<!--/*        <div style="padding-left: 50px;float: left">*/-->
        <div style="margin-left:0px; line-height:0px;">访问记录排行榜 {{ dates }}</div>
        <el-main>
            <el-table
                :data="iptableData"
                style="width: max-content;margin-top: 30px;margin-left: 42%"

                :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
                height="300">
              <el-table-column
                  fixed
                  prop="date"
                  label="排名"
                  type="index"
                  width="50">
              </el-table-column>
              <el-table-column
                  prop="ipaddr"
                  label="IP"
                  width="120">
              </el-table-column>
              <el-table-column
                  prop="score"
                  label="访问次数"
                  width="100">
              </el-table-column>
            </el-table>
          </el-main>
<!--        </div>-->
      </a-col>

    </a-row>
    <a-row :gutter="20">
      <a-col :span="12">
        <div style="margin-left:0px; line-height:0px;">程序更新日志</div>
        <el-main>
          <el-table
              :data="devtableData"
              style="width: max-content;margin-top: 30px;margin-left: 32%"
              :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }"
              height="300">
            <el-table-column
                fixed
                prop="date"
                label="日期"
                height="10"
                width="160">
            </el-table-column>
            <el-table-column
                prop="name"
                label="开发人员"
                width="80">
            </el-table-column>
            <el-table-column
                prop="address"
                label="更新内容"
                width="500">
            </el-table-column>
          </el-table>
        </el-main>
      </a-col>

    </a-row>


    <button @click="gotolinkPrePage" type="success">上一页</button>

  </div>
</template>
<script>
import {sendMsg, queryVisits} from "../components/api";


export default {
  data() {
    return {
      devtableData: [{
        date: '2023-03-17 20:26:53',
        name: 'G',
        address: '造轮子1.0版本：拼数据加逗号，身份证号码加密',
      }, {
        date: '2023-03-21 21:46:58',
        name: 'J',
        address: '造轮子1.1版本：在原来的基础上添加表单处理两种模式',
      }, {
        date: '2023-03-21 19:22:53',
        name: 'G',
        address: '造轮子1.2版本：添加异步任务，防止网站攻击，并发量设置为500次/秒',
      }, {
        date: '2023-03-22 22:13:17',
        name: 'G',
        address: '造轮子1.3版本：添加用户使用排行榜，降序展示',
      }
      ],
      iptableData: [],
      formData: {
        str: undefined,
        type: 1,
      },
      rules: {
        str: [{
          required: true,
          message: '请输入请输入',
          trigger: 'blur'
        }],
        type: [{
          required: true,
          message: '选择类型不能为空',
          trigger: 'change'
        }],
      },
      typeOptions: [{
        "label": "id加单引号",
        "value": 1
      }, {
        "label": "Name加单引号",
        "value": 2
      }, {
        "label": "身份证加密",
        "value": 3
      }, {
        "label": "原生表单",
        "value": 4
      }, {
        "label": "MAP表单",
        "value": 5
      }
      ],
      resStr: "",
      dates: ""
    }
  },


  created() {
    this.formatDate();
    queryVisits().then(response => {
      this.iptableData = response.data;
    })
  },


  methods: {
    gotolinkPrePage() {
      this.$router.go(-1)
    },
    submitForm() {
      this.$refs.elForm.validate(valid => {
        if (valid) {
          sendMsg(this.formData).then(response => {
            // this.$alert("发送成功")
            this.resStr = response.msg;
            // this.$alert("msg：" + this.resStr)
          }).catch(() => {
          })
          queryVisits().then(response => {
            this.iptableData = response.data;
          })
        }
      })
      this.formatDate();
    },
    resetForm() {
      this.formatDate();
      this.$refs['elForm'].resetFields()
      this.resStr = "";
    },
    formatDate() {
      let date = new Date();
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();
      d = d < 10 ? ('0' + d) : d;
      let h = date.getHours();
      h = h < 10 ? ('0' + h) : h;
      let m = date.getMinutes();
      m = m < 10 ? ('0' + m) : m;
      let s = date.getSeconds();
      s = s < 10 ? ('0' + s) : s;
      this.dates = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
    },
  }
}
</script>

<style>

</style>
